<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 青南学长平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #6ab1f7;
            --primary-light: #a8d0fe;
            --secondary: #4a8bc9;
            --accent: #8ec5fc;
            --text: #2c3e50;
            --text-light: #6c757d;
            --background: #f0f8ff;
            --white: #ffffff;
            --card-shadow: 0 8px 20px rgba(106, 177, 247, 0.15);
            --hover-shadow: 0 12px 30px rgba(106, 177, 247, 0.25);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: var(--background);
            color: var(--text);
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* 导航栏样式 */
        header {
            background-color: var(--white);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .logo-icon {
            color: var(--primary);
            font-size: 28px;
        }
        
        .logo-text {
            font-size: 24px;
            font-weight: 700;
            color: var(--primary);
            letter-spacing: -0.5px;
        }
        
        /* 注册区域样式 */
        .register-section {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            padding: 40px 0;
        }
        
        .register-container {
            display: flex;
            width: 100%;
            max-width: 1000px;
            background: var(--white);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
        }
        
        .register-left {
            flex: 1;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: var(--white);
            padding: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .register-right {
            flex: 1;
            padding: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .welcome-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 15px;
        }
        
        .welcome-text {
            font-size: 1.1rem;
            margin-bottom: 30px;
            opacity: 0.9;
        }
        
        .features-list {
            list-style: none;
        }
        
        .features-list li {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .feature-icon {
            width: 24px;
            height: 24px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .register-title {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 10px;
        }
        
        .register-subtitle {
            color: var(--text-light);
            margin-bottom: 30px;
        }
        
        .register-form {
            width: 100%;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text);
        }
        
        .input-with-icon {
            position: relative;
        }
        
        .form-input {
            width: 100%;
            padding: 14px 45px 14px 15px;
            border: 1px solid var(--primary-light);
            border-radius: 10px;
            background-color: var(--white);
            font-size: 1rem;
            transition: all 0.3s;
        }
        
        .form-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(106, 177, 247, 0.15);
        }
        
        .input-icon {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--primary-light);
        }
        
        .form-row {
            display: flex;
            gap: 15px;
        }
        
        .form-row .form-group {
            flex: 1;
        }
        
        .gender-options {
            display: flex;
            gap: 20px;
        }
        
        .gender-option {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }
        
        .gender-option input[type="radio"] {
            display: none;
        }
        
        .gender-custom-radio {
            width: 20px;
            height: 20px;
            border: 2px solid var(--primary-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }
        
        .gender-custom-radio::after {
            content: '';
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: var(--primary);
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .gender-option input[type="radio"]:checked + .gender-custom-radio {
            border-color: var(--primary);
        }
        
        .gender-option input[type="radio"]:checked + .gender-custom-radio::after {
            opacity: 1;
        }
        
        .gender-option span {
            color: var(--text);
        }
        
        .region-selectors {
            display: flex;
            gap: 10px;
        }
        
        .region-selectors select {
            flex: 1;
            padding: 14px 15px;
            border: 1px solid var(--primary-light);
            border-radius: 10px;
            background-color: var(--white);
            font-size: 1rem;
            transition: all 0.3s;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 15px center;
            background-size: 16px;
        }
        
        .region-selectors select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(106, 177, 247, 0.15);
        }
        
        .region-selectors select:disabled {
            background-color: #f8f9fa;
            color: #6c757d;
            cursor: not-allowed;
        }
        
        .register-button {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: var(--white);
            border: none;
            border-radius: 10px;
            padding: 14px 20px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            width: 100%;
            margin-bottom: 20px;
        }
        
        .register-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(106, 177, 247, 0.4);
        }
        
        .register-button:disabled {
            background: #cccccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .login-link {
            text-align: center;
            color: var(--text-light);
        }
        
        .login-link a {
            color: var(--primary);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s;
        }
        
        .login-link a:hover {
            color: var(--secondary);
        }
        
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255,255,255,.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
            margin-right: 10px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* 页脚样式 */
        footer {
            background-color: var(--white);
            padding: 30px 0;
            margin-top: 40px;
            border-top: 1px solid var(--primary-light);
        }
        
        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .footer-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
            color: var(--primary);
            font-size: 1.2rem;
        }
        
        .footer-links {
            display: flex;
            gap: 20px;
        }
        
        .footer-link {
            color: var(--text-light);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-link:hover {
            color: var(--primary);
        }
        
        .copyright {
            text-align: center;
            margin-top: 30px;
            color: var(--text-light);
            font-size: 0.9rem;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .register-container {
                flex-direction: column;
            }
            
            .register-left, .register-right {
                padding: 30px;
            }
            
            .form-row {
                flex-direction: column;
                gap: 0;
            }
            
            .region-selectors {
                flex-direction: column;
            }
            
            .footer-content {
                flex-direction: column;
                gap: 20px;
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <div class="container">
            <div class="navbar">
                <div class="logo">
                    <i class="fas fa-graduation-cap logo-icon"></i>
                    <span class="logo-text">青南学长</span>
                </div>
            </div>
        </div>
    </header>

    <!-- 注册区域 -->
    <section class="register-section">
        <div class="container">
            <div class="register-container">
                <div class="register-left">
                    <h2 class="welcome-title">加入我们</h2>
                    <p class="welcome-text">创建您的账户，开启家教之旅</p>
                    
                    <ul class="features-list">
                        <li>
                            <div class="feature-icon">
                                <i class="fas fa-check"></i>
                            </div>
                            <span>连接优秀教师与学生</span>
                        </li>
                        <li>
                            <div class="feature-icon">
                                <i class="fas fa-check"></i>
                            </div>
                            <span>个性化匹配学习需求</span>
                        </li>
                        <li>
                            <div class="feature-icon">
                                <i class="fas fa-check"></i>
                            </div>
                            <span>安全可靠的学习环境</span>
                        </li>
                        <li>
                            <div class="feature-icon">
                                <i class="fas fa-check"></i>
                            </div>
                            <span>随时随地开始学习</span>
                        </li>
                    </ul>
                </div>
                
                <div class="register-right">
                    <h2 class="register-title">创建账户</h2>
                    <p class="register-subtitle">请填写您的个人信息</p>
                    
                    <form class="register-form">
                        <div class="form-group">
                            <label class="form-label" for="qq-email">QQ邮箱</label>
                            <div class="input-with-icon">
                                <input type="email" id="qq-email" class="form-input" placeholder="请输入QQ邮箱">
                                <i class="fas fa-envelope input-icon"></i>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label" for="phone">手机号</label>
                            <div class="input-with-icon">
                                <input type="tel" id="phone" class="form-input" placeholder="请输入手机号">
                                <i class="fas fa-phone input-icon"></i>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">性别</label>
                                <div class="gender-options">
                                    <label class="gender-option">
                                        <input type="radio" name="gender" value="male">
                                        <span class="gender-custom-radio"></span>
                                        <span>男</span>
                                    </label>
                                    <label class="gender-option">
                                        <input type="radio" name="gender" value="female">
                                        <span class="gender-custom-radio"></span>
                                        <span>女</span>
                                    </label>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label" for="nickname">昵称</label>
                                <input type="text" id="nickname" class="form-input" placeholder="请输入昵称">
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">常住地区</label>
                            <div class="region-selectors">
                                <select id="province" disabled>
                                    <option value="">加载中...</option>
                                </select>
                                
                                <select id="city" disabled>
                                    <option value="">请先选择省份</option>
                                </select>
                                
                                <select id="district" disabled>
                                    <option value="">请先选择城市</option>
                                </select>
                            </div>
                        </div>
                        
                        <button type="button" class="register-button" id="register-button" disabled>
                            <span class="loading" id="region-loading"></span>
                            加载地区数据中...
                        </button>
                        
                        <p class="login-link">
                            已有账户？ <a href="login.html">立即登录</a>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <i class="fas fa-graduation-cap"></i>
                    <span>青南学长平台</span>
                </div>
                
                <div class="footer-links">
                    <a href="about.html" class="footer-link">关于我们</a>
                    <a href="about.html" class="footer-link">联系我们</a>
                    <a href="provisions.html" class="footer-link">隐私政策</a>
                    <a href="provisions.html" class="footer-link">使用条款</a>
                </div>
            </div>
            
            <div class="copyright">
                © 2025 青南学长平台 - 为学习和教育搭建桥梁
            </div>
        </div>
    </footer>

    <script>
        // 全局变量存储地区数据
        let regionData = {};
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            const provinceSelect = document.getElementById('province');
            const citySelect = document.getElementById('city');
            const districtSelect = document.getElementById('district');
            const registerButton = document.getElementById('register-button');
            const regionLoading = document.getElementById('region-loading');
            
            // 从后端获取地区数据
            fetchRegionData();
            
            // 省份选择变化事件
            provinceSelect.addEventListener('change', function() {
                const provinceId = this.value;
                
                // 清空城市和区县选项
                citySelect.innerHTML = '<option value="">请选择城市</option>';
                districtSelect.innerHTML = '<option value="">请选择区县</option>';
                citySelect.disabled = true;
                districtSelect.disabled = true;
                
                if (provinceId && regionData[provinceId]) {
                    // 启用城市选择框
                    citySelect.disabled = false;
                    
                    // 添加城市选项
                    const cities = regionData[provinceId].cities;
                    for (const cityId in cities) {
                        const option = document.createElement('option');
                        option.value = cityId;
                        option.textContent = cities[cityId].name;
                        citySelect.appendChild(option);
                    }
                }
            });
            
            // 城市选择变化事件
            citySelect.addEventListener('change', function() {
                const provinceId = provinceSelect.value;
                const cityId = this.value;
                
                // 清空区县选项
                districtSelect.innerHTML = '<option value="">请选择区县</option>';
                districtSelect.disabled = true;
                
                if (provinceId && cityId && regionData[provinceId] && regionData[provinceId].cities[cityId]) {
                    // 启用区县选择框
                    districtSelect.disabled = false;
                    
                    // 添加区县选项
                    const districts = regionData[provinceId].cities[cityId].districts;
                    for (const districtId in districts) {
                        const option = document.createElement('option');
                        option.value = districtId;
                        option.textContent = districts[districtId];
                        districtSelect.appendChild(option);
                    }
                }
            });
            
            // 注册按钮点击事件
            registerButton.addEventListener('click', function() {
                const email = document.getElementById('qq-email').value.trim();
                const phone = document.getElementById('phone').value.trim();
                const gender = document.querySelector('input[name="gender"]:checked');
                const nickname = document.getElementById('nickname').value.trim();
                const province = document.getElementById('province').value;
                const city = document.getElementById('city').value;
                const district = document.getElementById('district').value;
                
                // 表单验证
                if (!email) {
                    alert('请输入QQ邮箱');
                    return;
                }
                
                if (!email.endsWith('@qq.com')) {
                    alert('请输入正确的QQ邮箱格式');
                    return;
                }
                
                if (!phone) {
                    alert('请输入手机号');
                    return;
                }
                
                if (!/^1[3-9]\d{9}$/.test(phone)) {
                    alert('请输入正确的手机号格式');
                    return;
                }
                
                if (!gender) {
                    alert('请选择性别');
                    return;
                }
                
                if (!nickname) {
                    alert('请输入昵称');
                    return;
                }
                
                if (!province || !city || !district) {
                    alert('请选择完整的常住地区');
                    return;
                }
                
                // 获取选中的地区名称
                const provinceName = regionData[province].name;
                const cityName = regionData[province].cities[city].name;
                const districtName = regionData[province].cities[city].districts[district];
                
                // 在实际应用中，这里应该发送注册请求到后端
                // 这里只是模拟注册过程
                registerButton.textContent = '注册中...';
                registerButton.disabled = true;
                
                setTimeout(function() {
                    alert(`注册成功！\n\n您的信息：\n邮箱：${email}\n手机：${phone}\n性别：${gender.value === 'male' ? '男' : '女'}\n昵称：${nickname}\n地区：${provinceName} ${cityName} ${districtName}`);
                    registerButton.textContent = '注册';
                    registerButton.disabled = false;
                    
                    // 在实际应用中，这里应该跳转到登录页面或用户中心
                    // window.location.href = 'login.html';
                }, 1500);
            });
            
            // 从后端获取地区数据的函数
            function fetchRegionData() {
                // 这里使用模拟数据，实际应用中应该请求真实的后端API
                // 假设后端API地址为 /RegionList
                const apiUrl = '/RegionList'; // 实际URL需要根据您的后端配置确定
                
                // 模拟API请求延迟
                setTimeout(() => {
                    // 模拟从后端获取的数据结构
                    regionData = {
                        "beijing": {
                            "name": "北京市",
                            "cities": {
                                "beijing": {
                                    "name": "北京市",
                                    "districts": {
                                        "dongcheng": "东城区",
                                        "xicheng": "西城区",
                                        "chaoyang": "朝阳区",
                                        "fengtai": "丰台区",
                                        "shijingshan": "石景山区",
                                        "haidian": "海淀区",
                                        "mentougou": "门头沟区",
                                        "fangshan": "房山区",
                                        "tongzhou": "通州区",
                                        "shunyi": "顺义区",
                                        "changping": "昌平区",
                                        "daxing": "大兴区",
                                        "huairou": "怀柔区",
                                        "pinggu": "平谷区",
                                        "miyun": "密云区",
                                        "yanqing": "延庆区"
                                    }
                                }
                            }
                        },
                        "shanghai": {
                            "name": "上海市",
                            "cities": {
                                "shanghai": {
                                    "name": "上海市",
                                    "districts": {
                                        "huangpu": "黄浦区",
                                        "xuhui": "徐汇区",
                                        "changning": "长宁区",
                                        "jingan": "静安区",
                                        "putuo": "普陀区",
                                        "hongkou": "虹口区",
                                        "yangpu": "杨浦区",
                                        "minhang": "闵行区",
                                        "baoshan": "宝山区",
                                        "jiading": "嘉定区",
                                        "pudong": "浦东新区",
                                        "jinshan": "金山区",
                                        "songjiang": "松江区",
                                        "qingpu": "青浦区",
                                        "fengxian": "奉贤区",
                                        "chongming": "崇明区"
                                    }
                                }
                            }
                        },
                        "guangdong": {
                            "name": "广东省",
                            "cities": {
                                "guangzhou": {
                                    "name": "广州市",
                                    "districts": {
                                        "yuexiu": "越秀区",
                                        "liwan": "荔湾区",
                                        "haizhu": "海珠区",
                                        "tianhe": "天河区",
                                        "baiyun": "白云区",
                                        "huangpu": "黄埔区",
                                        "panyu": "番禺区",
                                        "huadu": "花都区",
                                        "nansha": "南沙区",
                                        "conghua": "从化区",
                                        "zengcheng": "增城区"
                                    }
                                },
                                "shenzhen": {
                                    "name": "深圳市",
                                    "districts": {
                                        "luohu": "罗湖区",
                                        "futian": "福田区",
                                        "nanshan": "南山区",
                                        "baoan": "宝安区",
                                        "longgang": "龙岗区",
                                        "yantian": "盐田区",
                                        "longhua": "龙华区",
                                        "pingshan": "坪山区",
                                        "guangming": "光明区"
                                    }
                                },
                                "dongguan": {
                                    "name": "东莞市",
                                    "districts": {
                                        "nancheng": "南城区",
                                        "dongcheng": "东城区",
                                        "wanjiang": "万江区",
                                        "guancheng": "莞城区"
                                    }
                                }
                            }
                        },
                        "zhejiang": {
                            "name": "浙江省",
                            "cities": {
                                "hangzhou": {
                                    "name": "杭州市",
                                    "districts": {
                                        "shangcheng": "上城区",
                                        "xiacheng": "下城区",
                                        "jianggan": "江干区",
                                        "gongshu": "拱墅区",
                                        "xihu": "西湖区",
                                        "binjiang": "滨江区",
                                        "xiaoshan": "萧山区",
                                        "yuhang": "余杭区",
                                        "fuyang": "富阳区",
                                        "linan": "临安区",
                                        "tonglu": "桐庐县",
                                        "chunan": "淳安县",
                                        "jiande": "建德市"
                                    }
                                },
                                "ningbo": {
                                    "name": "宁波市",
                                    "districts": {
                                        "haishu": "海曙区",
                                        "jiangdong": "江东区",
                                        "jiangbei": "江北区",
                                        "beilun": "北仑区",
                                        "zhenhai": "镇海区",
                                        "yinzhou": "鄞州区",
                                        "xiangshan": "象山县",
                                        "ninghai": "宁海县",
                                        "yuyao": "余姚市",
                                        "cixi": "慈溪市",
                                        "fenghua": "奉化市"
                                    }
                                }
                            }
                        }
                    };
                    
                    // 填充省份选择框
                    provinceSelect.innerHTML = '<option value="">请选择省份</option>';
                    for (const provinceId in regionData) {
                        const option = document.createElement('option');
                        option.value = provinceId;
                        option.textContent = regionData[provinceId].name;
                        provinceSelect.appendChild(option);
                    }
                    
                    // 启用省份选择框
                    provinceSelect.disabled = false;
                    
                    // 更新注册按钮状态
                    registerButton.innerHTML = '注册';
                    registerButton.disabled = false;
                    regionLoading.style.display = 'none';
                    
                }, 1500); // 模拟网络延迟
                
                // 实际应用中的代码应该是这样的：
                /*
                fetch(apiUrl)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('网络响应不正常');
                        }
                        return response.json();
                    })
                    .then(data => {
                        regionData = data;
                        
                        // 填充省份选择框
                        provinceSelect.innerHTML = '<option value="">请选择省份</option>';
                        for (const provinceId in regionData) {
                            const option = document.createElement('option');
                            option.value = provinceId;
                            option.textContent = regionData[provinceId].name;
                            provinceSelect.appendChild(option);
                        }
                        
                        // 启用省份选择框
                        provinceSelect.disabled = false;
                        
                        // 更新注册按钮状态
                        registerButton.innerHTML = '注册';
                        registerButton.disabled = false;
                        regionLoading.style.display = 'none';
                    })
                    .catch(error => {
                        console.error('获取地区数据失败:', error);
                        alert('获取地区数据失败，请刷新页面重试');
                        registerButton.innerHTML = '获取地区数据失败，请刷新页面';
                    });
                */
            }
        });
    </script>
</body>
</html>